<template>
  <base-window class-name="task-receipt-edit-container" size="larger" :title="title" :show.sync="visible" width="700px" @closed="reset">
    <div class="base-modal-content" v-if="init">
      <!-- <div class="task-receipt-header" :class="{'header-change': formCellCount > 1}">
          <FormCellChange class="mar-r-8" :count="formCellCount" @update="(e)=>{formCellCount=e}"></FormCellChange>
        </div> -->
      <form-builder v-if="fields" ref="form" :form-cell-count="formCellCount" :class="{'taskreceipt-form-container-cell': formCellCount > 1, 'bbx-cell-form-builder': true}" :fields="fields" :value="form" :total-currency="currencyType" :taskId="task.id" :productIds="productIds" :serviceQualityStatus="serviceQualityStatus" :mode="mode" :is-edit="isEdit" @update="update" :settlementRulesList="settlementRulesList" @getDeleteFiles="getDeleteFiles" formEditingMode="edit" :intelligentConfig="intelligentConfig">
        <!-- 货币单独写，避免使用watch调用多次接口 -->
        <template slot="currencyType" slot-scope="{ field }">
          <form-item :label="$t('common.currency.settleCurrency')" class="warehouse-form-select">
            <form-select
              :field="field" 
              :source="currencyOptionSelect" 
              v-model="currencyType" 
              @update="updateCurrencyType" 
              :clearable="false"
              />
          </form-item>
        </template>
      </form-builder>
      <!-- start 费用合计 -->
      <div class="form-item" v-if="showTotalFee">
        <label>{{$t('task.detail.components.totalFee')}}</label> <span v-if="internationalGray" class="desc-tip">{{ $t('common.currency.descTip', {currencyTypeName})}}</span>
        <div class="form-item-control">
          <!-- 设置规则的费用合计 -->
          <el-table ref="tableRef" :data="receiptRulesList" header-row-class-name="base-table-header-v3" row-class-name="base-table-row-v3" border show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" v-if="isShowSettlementRules">
            <el-table-column prop="settlementRules" :label="$t('common.zhongqi.title1')"></el-table-column>
            <el-table-column prop="isFreeName" :label="$t('zhongqi.setting.chargeOrNot')"></el-table-column>
            <el-table-column :label="$t('zhongqi.list.text2')"  v-if="isCloudwarehouse && showMaterialVerifyEliminate">
              <template slot-scope="scope">
                <template>{{ scope.row.materialTotal }}<span class="ml-3" v-if="internationalGray">{{currencyType}}</span></template>
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.serviceFee')"  v-if="showService">
              <template slot-scope="scope">
                <template>{{ scope.row.serviceTotal }}<span class="ml-3" v-if="internationalGray">{{currencyType}}</span></template>
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.discountFee')" v-if="showDiscountCost">
              <template slot-scope="scope">
                <template v-if="isPaySuccess">{{ scope.row.disExpense }}</template>
                <input type="number" :class="internationalGray ? 'gray-disexpense':'disExpense'" :disabled="scope.row.isFree === 'free'" v-model="scope.row.disExpense" @input="updateDisExpenseRule(scope.row)" v-else />
                <span v-if="internationalGray">{{currencyType}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalExpense" :label="internationalGray ? $t('common.zhongqi.total') :$t('zhongqi.list.text3')">
              <template slot-scope="scope">
                <template>{{ scope.row.totalExpense }}<span v-if="internationalGray" class="ml-3">{{currencyType}}</span></template>
              </template>
            </el-table-column>
          </el-table>

          <!-- 没有设置规则的费用合计(旧的逻辑) -->
          <el-table :data="totalData" header-row-class-name="base-table-header-v3" row-class-name="base-table-row-v3" border v-else>
            <el-table-column :label="$t('task.detail.components.sparePartFee')" v-if="showSparepart">
              <template slot-scope="scope">
                <template>{{ scope.row.sparepartTotal }}<span v-if="internationalGray" class="ml-3">{{currencyType}}</span></template>
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.serviceFee')" v-if="showService">
              <template slot-scope="scope">
                <template>{{ scope.row.serviceTotal }}<span v-if="internationalGray" class="ml-3">{{currencyType}}</span></template>
              </template>
            </el-table-column>
            <el-table-column :label="$t('common.form.type.materialVerifyEliminate')" v-if="isCloudwarehouse && showMaterialVerifyEliminate">
              <template slot-scope="scope">
                <template>{{ scope.row.materialTotal }}<span v-if="internationalGray" class="ml-3">{{currencyType}}</span></template>
              </template>
            </el-table-column>
            <el-table-column :label="$t('task.detail.components.discountFee')" v-if="showDiscountCost">
              <template slot-scope="scope">
                <template v-if="isPaySuccess">{{ scope.row.disExpense }}</template>
                <input type="number" :class="internationalGray ? 'gray-disexpense':'disExpense'" v-model="scope.row.disExpense" @input="updateDisExpense" @blur="disExpenseBlur" v-else />
                <span v-if="internationalGray">{{currencyType}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalExpense" :label="internationalGray ? $t('common.currency.totalReceivables'): $t('task.detail.components.totalReceivables')">
              <template slot-scope="scope">
                <template>{{ scope.row.totalExpense }}<span v-if="internationalGray" class="ml-3">{{currencyType}}</span></template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- end 费用合计 -->

      <!-- start 支付信息 -->
      <div class="form-item" v-if="showPaymentMethod">
        <label>{{$t('task.detail.components.customerPayMethod')}}</label>
        <div class="form-item-control payment-info-row">
          <p class="payment-method">
            {{$t('task.detail.components.payMethod')}}：
            <img v-if="getPaymentMethodImg()" :src="getPaymentMethodImg()" />
            {{ paymentMethod }}
          </p>
          <!-- TODO：payment服务已废弃，拿不到数据，暂时注释 -->
          <!-- <div class="payment-method-detail" v-if="isPaySuccess">
            <p>{{$t('task.detail.components.payment')}}：{{ paymentInfo.payType }}</p>
            <p>{{$t('task.detail.components.payAccount')}}：{{ paymentInfo.buyerLogonId }}</p>
            <p>{{$t('task.detail.components.merchantOrderNo')}}：{{ paymentInfo.shbTradeNo }}</p>
            <p>{{$t('task.detail.components.payCreateTime')}}：{{ paymentInfo.createTime | fmt_datetime }}</p>
          </div> -->
        </div>
      </div>
      <!-- end 支付信息 -->
    </div>
    <div slot="footer" class="dialog-footer">
      <template v-if="action == 'edit'">
        <el-button v-if="isBgiPrivate && task.state !== 'finished'" :disabled="pending" @click="synchronizeQuotedPrice" type="plain-third">{{$t('task.detail.synchronizeQuotedPrice')}}</el-button>
        <el-button :disabled="pending" @click="handleCancel">{{$t('common.base.cancel')}}</el-button>
        <el-button type="primary" :disabled="pending" @click="submit">{{$t('common.base.save')}}</el-button>
      </template>
      <template v-else>
        <el-button v-if="isBgiPrivate && task.state !== 'finished'" :disabled="pending" @click="synchronizeQuotedPrice" type="plain-third">{{$t('task.detail.synchronizeQuotedPrice')}}</el-button>
        <el-button type="danger" :disabled="pending" @click="handleCancel">{{$t('common.base.cancel')}}</el-button>
        <el-button :disabled="pending" @click="draft" type="plain-third">{{$t('common.base.temporarySave')}}</el-button>
        <el-button type="primary" :disabled="pending" @click="finishTaskCheck">{{$t('common.task.button.finish')}}</el-button>
      </template>
    </div>

    <!-- 物料核销返还二次确认弹窗 -->
    <material-reconfirm-dialog
      ref="materialReconfirmDialog"
      :initData="initData"
      :returnColumns="isMaterialReturnShowFields"
      :eliminateColumns="isMaterialVerifyEliminateReconfirmShowFields"
      @submit="submitMaterialReconfirm"
    />

    <!-- 物料返还信息弹窗-->
    <material-return-information-dialog 
      ref="materialReturnInformation"
      @update="updateMaterialReturnInformation"
    />
  </base-window>
</template>

<script>
import TaskReceiptEditView from './TaskReceiptEditView';
export default TaskReceiptEditView;
</script>

<style lang="scss">
@import './TaskReceiptEditView.scss';
</style>

<style lang="scss" scoped>
.form-item-control {
  ::v-deep .total-row-table-last-line {
    .cell {
      justify-content: center !important;
    }
  }
  .gray-disexpense {
    width: 70%!important;
  }
}
.desc-tip{
  font-size: 12px;
  color: #595959;
}
</style>
